<template>
  <div>
    <div class="box">
      <!-- 筛选查询 -->
      <div class="list">
        <div>
          <img
            class="list-img"
            src="../../../assets/images/搜索小.png"
            alt=""
          />
        </div>
        <div>
          筛选查询
        </div>
      </div>
      <div class="search">
        <div class="search">
          <div style="display: flex;">
            <div class="whead">
              <div>轮播图位置 : &nbsp;</div>

              <el-select
                v-model="form.srot"
                placeholder="全部"
                @change="cityChange(form.srot)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="whead">
              <div>轮播图状态 : &nbsp;</div>
              <el-select
                v-model="teat"
                placeholder="全部"
                @change="statusChange(teat)"
              >
                <el-option
                  v-for="item in statu"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <el-button type="primary" @click="btnSearch">搜索</el-button>
            </div>
            <div>
              <el-button
                style="margin-left: 10px;"
                type="primary"
                @click="addEvent"
                >添加轮播图</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 数据列表 -->
      <div class="list">
        <div>
          <img
            class="list-img"
            src="../../../assets/images/查询数据列表.png"
            alt=""
          />
        </div>
        <div>
          数据列表
        </div>
      </div>
      <div>
        <!-- 表格 -->
        <el-table border :data="listData" style="width: 100%" align="center">
          <el-table-column
            prop="id"
            label="轮播图编号"
            align="center"
          ></el-table-column>
          <el-table-column label="轮播图位置" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.pageIndex == 1">首页</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="sort"
            label="轮播图排序"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="imgUrl"
            label="轮播图图片"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-popover placement="top-start" trigger="click">
                <!--trigger属性值：hover、click、focus 和 manual-->
                <a
                  :href="scope.row.imgUrl"
                  target="_blank"
                  title="查看最大化图片"
                >
                  <img
                    :src="scope.row.imgUrl"
                    style="width: 200px;height: 200px"
                  />
                </a>
                <img
                  slot="reference"
                  :src="scope.row.imgUrl"
                  style="width: 80px;height: 80px; cursor:pointer"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="imgUrl"
            label="轮播图地址"
            align="center"
          ></el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="0"
                :inactive-value="1"
                @change="changeSwitch(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row.id)"
                type="primary"
                size="small"
                >编辑</el-button
              >
            
                <el-button
                  type="danger"
               @click="bannerConfigRemove(scope.row.id)"   
                  slot="reference"
                  size="small"
                  >删除</el-button
                >
             
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          :title="title"
          :visible.sync="basicShow"
          width="20%"
          @close="openClick"
        >
          <el-form :model="form">
            <el-form-item label="轮播图位置:" >
              <el-select v-model="form.seat" style="width: 240px; margin-left: 6.5%;">
                <el-option
                  v-for="item in option"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序:" >
              <el-input
                style="width: 240px; margin-left: 15.5%;"
                v-model="form.sort"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item prop="file">
              <el-upload
                style="text-align: center;"
                class="upload-demo"
                ref="upload"
                multiple
                action=""
                :http-request="httpRequest"
                :auto-upload="false"
                :before-upload="beforeAvatarUpload"
                :on-remove="handleRemove"
                :on-preview="handlePictureCardPreview"
                :show-file-list="false"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选取文件</el-button
                >
                <el-button
                  style="margin-left:5px"
                  size="small"
                  type="primary"
                  @click="submitUploadList"
                  >上传
                </el-button>
              </el-upload>
              <el-dialog
                :visible.sync="dialogVisible"
                style="text-align: center;"
              >
                <img
                  style="width: 200px; height: 200px;"
                  :src="dialogImageUrl"
                  alt=""
                />
              </el-dialog>
            </el-form-item>
            <div v-if="dialogImageUrl" style="text-align: center;">
              <img width="200px" height="200px" :src="dialogImageUrl" alt="" />
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="basicShow = false">取 消</el-button>
            <el-button v-if="shows" type="primary" @click="basicShowOpen"
              >确 定</el-button
            >
            <el-button v-if="show" type="primary" @click="basicClick"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px; ">
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import CommonTable from "@/components/Table/index.vue";
import {
  bannerConfig,
  CarouselUpdate,
  uploadFileToOss,
  bannerConfigAdd,
  getById,
  bannerConfigUpdate,
  bannerConfigRemove
} from "@/api/user";
import { Toast } from "vant";

export default {
  data() {
    return {
      input: "", //搜索
      phone: "", //手机号搜索
      timeInfo: "", //日期选择
      principal: "", //负责人搜索
      city: "", //城市搜索
      staty: "", //水库状态
      loading: false,
      selectedAssetsList: [], // 该数组对象
      assetsUidList: [], // 下标值
      currentPage: 1, //当前页数
      pageSize: 10, //每页条数
      total: 0, //总条目数
      listData: [],
      pageIndex: 0, //轮播图位置:0.所有 1.首页
      status: -1, //轮播图状态：-1.所有 0.启用 1.禁用
      teat: "",
      dialogImageUrl: "", //图片
      dialogVisible: false,
      basicShow: false,
      form: {
        code: "",
        name: "",
        seat: "", //轮播图排序
        sort: "", // 轮播图位置
        id: ""
      },
      value: "",
      options: [{ id: 1, name: "首页" }],
      option: [{ id: 1, name: "首页" }],
      statu: [
        {
          value: 0,
          label: "启用"
        },
        {
          value: 1,
          label: "禁用"
        }
      ],
      show: false,
      shows: false,
      title: "添加轮播"
    };
  },
  created() {
    this.bannerConfig(this.pageSize, this.currentPage);
  },
  methods: {
    // 删除
    async bannerConfigRemove(e) {
      this.$confirm("此操作删除轮播图, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let data = {
            id: e
          };
          let result = await bannerConfigRemove(data);
          if (result.code == 0) {
            this.bannerConfig(this.pageSize, this.currentPage);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
   
    },
    // 编辑按钮
    async handleClick(e) {
      this.title = "编辑轮播";
      let data = {
        id: e
      };
      let result = await getById(data);
      if (result.code == 0) {
        (this.dialogImageUrl = result.data.imgUrl),
          (this.form.seat = result.data.pageIndex),
          (this.form.sort = result.data.sort);
        this.form.id = result.data.id;
      }
    
      
      this.basicShow = true;
      this.show = true;
      this.shows = false;
    },
    // 确定编辑按钮
    async basicClick() {
      let data = {
        imgUrl: this.dialogImageUrl,
        pageIndex: this.form.seat,
        sort: this.form.sort,
        id: this.form.id
      };
      let result = await bannerConfigUpdate(data);
      if (result.code == 0) {
        Toast.success("编辑成功");
        this.basicShow = false;
        this.bannerConfig(this.pageSize, this.currentPage);
      } else {
        Toast.fail("编辑失败");
      }
    },
    // 确定添加
    async basicShowOpen() {
      let data = {
        imgUrl: this.dialogImageUrl,
        pageIndex: this.form.seat,
        sort: this.form.sort
      };
      let result = await bannerConfigAdd(data);
      if (result.code == 0) {
        Toast.success("添加成功");
        this.basicShow = false;
        this.bannerConfig(this.pageSize, this.currentPage);
      } else {
        Toast.fail("添加失败");
      }
    },
    // 清除数据
    openClick() {
      this.form.seat = "";
      this.form.sort = "";
      this.dialogImageUrl = "";
    },
    async httpRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let formData = new FormData(); // FormData 对象
      formData.append("file", fileObj); // 文件对象
      let result = await uploadFileToOss(formData);
      if (result.code == 0) {
        this.dialogImageUrl = result.data;
      }
    },
    submitUploadList() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      this.dialogImageUrl = "";
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.name;
      this.dialogVisible = true;
    },
    // 限制图片大小
    beforeAvatarUpload(file) {
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      const isLt500Kb = file.size / 1024 < 500;
      if (!isJPEG && !isJPG && !isPNG) {
        this.$message.error("上传文件只能是图片格式!");
      }
      if (!isLt500Kb) {
        this.$message.error("上传鱼米图片大小不能超过500KB!");
      }
      return (isJPEG || isJPG || isPNG) && isLt500Kb;
    },
    async bannerConfig(limit, page) {
      let data = {
        pageIndex: this.pageIndex,
        status: this.status,
        limit: this.pageSize,
        page: this.currentPage
      };
      let result = await bannerConfig(data);
   
      if (result.code == 0) {
        this.listData = result.data.records;
        this.pageSize = result.data.limit;
        this.total = result.data.total;
      }

    },

    // 更新轮播图状态
    async changeSwitch(e) {
   
      let data = {
        id: e.id,
        enableStatus: e.status
      };
      let result = await CarouselUpdate(data);
      if (result.code == 0) {
        Toast.success("修改状态成功");
      } else {
        Toast.fail("修改状态失败请稍后再试");
      }
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.bannerConfig(this.pageSize, this.currentPage);
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.bannerConfig(this.pageSize, this.currentPage);
    },

    // 轮播图位置搜索
    cityChange(e) {
      this.pageIndex = e;
      this.bannerConfig(this.pageSize, this.currentPage);
    },
    // 轮播图状态搜索
    statusChange(e) {
      this.status = e;
      this.bannerConfig(this.pageSize, this.currentPage);
    },
    // 搜索按钮
    btnSearch(e) {
      this.bannerConfig(this.pageSize, this.currentPage);
    },
    // 添加轮播图弹框页面
    addEvent() {
      this.title = "添加轮播";
      this.basicShow = true;
      this.show = false;
      this.shows = true;
    }
  }
};
</script>

<style lang="scss" scoped>
// ::v-deep .el-input--suffix .el-input__inner {
//   padding-right: 30px;
//   width: 240px;
// }
.box {
  border: 1px solid #ccc;
  width: 98%;
  margin: 10px auto;
}

.list {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;

  .list-img {
    width: 20px;
    height: 20px;
  }
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1abc9c !important;
  color: #fff;
}

.search {
  // display: flex;
  align-items: center;
  // height: 80px;
  line-height: 80px;
  margin: 0 20px;
}

.whead {
  width: 400px;
  display: -webkit-box;
}


</style>
